<template>
  <div class="custom-emoji-com" @click.stop="() => {}">
    <!-- :style="device === 'Mobile' ? { width: '90%' } : {}" -->
    <el-tabs :tab-position="tabposition" type="border-card" class="wrapper">
      <el-tab-pane
        v-for="(value, key, index) in emojisList"
        :label="key"
        :key="index"
        addable
      >
        <span slot="label"><i :class="emijoIconClassNameMap[key]"></i> </span>
        <span
          class="emoji-item"
          v-for="(item, index) in value"
          :key="index"
          @click.stop="selectItem(item)"
        >
          {{ item }}
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import emojis from "@/const/emoji";
export default {
  props: {
    tabposition: {
      type: String,
      default() {
        return "bottom";
      },
    },
  },
  data() {
    return {
      emojisList: emojis.data,
      selectedEmoji: "",
      emijoIconClassNameMap: {
        face: "iconfont icon-biaoqing",
        heart: "iconfont icon-meigui",
        // food: "iconfont icon-food",
        drink: "iconfont icon-pijiu",
        animal: "iconfont icon-icon-test",
      },
    };
  },
  computed: {
    // 设备查询
    // device() {
    //   return this.$store.state.device.deviceType
    // }
  },
  methods: {
    selectItem(item) {
      this.$emit("addemoji", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-emoji-com {
  position: relative;
  width: 250px;
  height: 200px;
  padding-bottom: 0 !important;
  .wrapper {
    transition: all 0.5s ease;
    height: 100%;
    overflow: auto;
    .el-tabs__content {
      height: 90%;
    }
    .emoji-item {
      cursor: pointer;
      display: inline-block;
      width: 30px;
      height: 30px;
      padding: 3px 3px 0;
    }
  }
}
::v-deep .el-tabs .el-tabs__content {
  height: auto;
  margin-bottom: 35px;
  .el-tab-pane {
    height: auto;
  }
}
::v-deep .el-tabs .el-tabs__header {
  width: 100%;
  height: 25px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  .el-tabs__nav {
    .el-tabs__item {
      text-align: center;
      font-size: 12px;
      width: 32px;
      height: 32px;
      padding: 0 !important;

      span {
        text-align: center;
        padding-bottom: 5px;
      }
    }
    .is-active {
      background-color: #fff;
    }
  }
  .is-bottom {
    margin: none;
  }
}
.iconfont {
  font-weight: 700;
}
</style>
